<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts 敬业度分布饼状图示例</title>
  <!-- 引入 ECharts.js -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 1200px; height: 800px;"></div>

  <script>
    // 从 JSON 文件中获取数据
    $.getJSON('JYD.json', function(data) {
      // 处理获取到的 JSON 数据
      // 根据 score 值分组统计
      const countMap = {
        '低：0-50': 0,
        '中：50-80': 0,
        '高：80-100': 0,
      };

      Object.values(data.Sheet1).forEach(obj => {
        const score = obj.score;
        if (score >= 0 && score <= 50) {
          countMap['低：0-50']++;
        } else if (score > 50 && score <= 80) {
          countMap['中：50-80']++;
        } else if (score > 80 && score <= 100) {
          countMap['高：80-100']++;
        }
      });

      // 使用 ECharts 绘制饼状图
      const chart = echarts.init(document.getElementById('chart'));

      // 准备饼状图的数据
      const seriesData = Object.entries(countMap).map(([level, count]) => ({
        name: level,
        value: count,
      }));

      // 配置项
      const options = {
        series: [
          {
            type: 'pie',
            radius: '55%',
            data: seriesData,
          },
        ],
      };

      // 使用配置项绘制图表
      chart.setOption(options);
    });
  </script>
</body>
</html>
